<template>
    <div class="page">
        <div class="search-form zw-form-layout">
            <el-form ref="formRef" :model="searchForm" label-width="auto">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="下单人" prop="buyer">
                            <el-input
                                v-model="searchForm.buyer"
                                placeholder="输入昵称、手机号、ID查询"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属分销员" prop="distributor">
                            <el-input
                                v-model="searchForm.distributor"
                                placeholder="输入昵称、手机号、ID查询"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="来源店铺" prop="shopId">
                            <el-select
                                v-model="searchForm.shopId"
                                filterable
                                reserve-keyword
                                clearable
                                placeholder="全部店铺">
                                <el-option label="全部店铺" value="" />
                                <el-option
                                    v-for="item in shopList"
                                    :key="item.shopId"
                                    :label="item.shopName"
                                    :value="item.shopId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单编号" prop="orderSn">
                            <el-input v-model="searchForm.orderSn" placeholder="请输入订单编号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建时间" prop="createdAt">
                            <el-date-picker
                                v-model="createdAt"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="zw-form-btns">
                        <el-button type="primary" @click="searchHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col class="zw-table-btns">
                <el-button type="primary" v-auth="'distribution_order:export'" @click="exportHandler">导出</el-button>
            </el-col>
        </el-row>
        <el-table :data="Data.tableData">
            <el-table-column align="center" width="280" prop="orderSn" label="订单编号">
                <template v-slot="{ row }">
                    <span class="link" @click="viewDetail(row)">{{ row.orderSn }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="totalAmount" label="商品实付款">
                <template v-slot="{ row }">
                    <span>￥{{ Number(row.totalAmount) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="totalRefund" label="已退款">
                <template v-slot="{ row }">
                    <span>￥{{ Number(row.totalRefund) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="totalBrokerage" label="总佣金">
                <template v-slot="{ row }">
                    <span
                        ><span v-if="row.benefitMode == 2">￥</span>{{ Number(row.totalBrokerage)
                        }}<span v-if="row.benefitMode == 1">积分</span></span
                    >
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="100" prop="buyerNickname" label="下单人">
                <template v-slot="{ row }">
                    <div>{{ row.buyerNickname }}</div>
                    <div>{{ row.buyerMobile }}</div>
                    <div>{{ row.buyerUid }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="100" prop="dtbNickname" label="所属分销员">
                <template v-slot="{ row }">
                    <div>{{ row.dtbNickname }}</div>
                    <div>{{ row.dtbMobile }}</div>
                    <div>{{ row.dtbUid }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="shopName" label="来源店铺"> </el-table-column>
            <el-table-column align="center" width="110" prop="createdAt" label="创建时间"> </el-table-column>
            <el-table-column align="center" prop="statusName" label="订单状态">
                <template v-slot="{ row }">
                    {{ translateOrderCode(row.status, row.isSelfPickup, 1) }}
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination zw-pagination">
            <Pagination
                :total="Data.totalCount"
                :page-size="searchForm.perPage"
                :current-page="searchForm.page"
                @size-change="onSizeChange"
                @pageChange="pageChange" />
        </div>

        <ZwOrderDetail ref="orderDetailRef" />
    </div>
</template>

<script setup name="">
import { ref, reactive, nextTick, onMounted, computed } from 'vue';
import { format, exportExc, dealObjectEmptyValue, translateOrderCode } from '@/commons/utils.js';
import request from '@/request';
import { getShopListHook } from '@/hooks';
import Pagination from '@/components/Pagination.vue';
const formRef = ref(null);
const orderDetailRef = ref(null);
let shopList = reactive([]);
const searchForm = reactive({
    buyer: '', //下单人关键字（ID、手机号、昵称）
    distributor: '', //分销员关键字（ID、手机号、昵称）
    shopId: '', //店铺ID
    orderSn: '', //订单编号
    createdAtStart: '', //创建时间（起）
    createdAtEnd: '', //创建时间（止）
    page: 1, //当前页
    perPage: 10 //每页展示条数
});
const Data = reactive({
    tabName: 1,
    totalCount: 0,
    tableData: []
});
const createdAt = computed({
    get() {
        return [searchForm.createdAtStart, searchForm.createdAtEnd];
    },
    set(val) {
        if (val) {
            searchForm.createdAtStart = format(val[0], 'YYYY-MM-DD HH:mm:ss');
            searchForm.createdAtEnd = format(val[1], 'YYYY-MM-DD') + ' 23:59:59';
        } else {
            searchForm.createdAtStart = '';
            searchForm.createdAtEnd = '';
        }
    }
});

// 获取来源店铺
const getshopList = async () => {
    const { data } = await getShopListHook();
    shopList.length = 0;
    const list = data.list;
    Object.assign(shopList, list);
};
const getTableData = async () => {
    const { data } = await request('distributionOrderListServ', searchForm);
    const { list } = data;
    Data.tableData.length = 0;
    Data.tableData.push(...list);
    Data.totalCount = data.totalCount;
};
const resetHandler = () => {
    formRef.value.resetFields();
    createdAt.value = '';
};
const pageChange = pageNum => {
    searchForm.page = pageNum;
    getTableData();
};
const onSizeChange = pageSize => {
    searchForm.perPage = pageSize;
    getTableData();
};
const searchHandler = () => {
    searchForm.page = 1;
    getTableData();
};

// 导出
const exportHandler = () => {
    let param = Object.assign({}, searchForm, { page: '', perPage: '' });
    request('distributionOrderExportServ', dealObjectEmptyValue(param)).then(res => {
        exportExc(res, '分销订单');
    });
};
const viewDetail = row => {
    nextTick(() => {
        orderDetailRef.value.onOpen(row.id);
    });
};

onMounted(() => {
    getshopList();
    getTableData();
});
</script>
<style lang="scss" scoped>
.page {
    .link {
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
